<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--wrap text in column-->
        <style type="text/css">
            .ui-jqgrid tr.jqgrow td {
                word-wrap: break-word; /* IE 5.5+ and CSS3 */
                white-space: pre-wrap; /* CSS3 */
                white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
                white-space: -pre-wrap; /* Opera 4-6 */
                white-space: -o-pre-wrap; /* Opera 7 */
                overflow: hidden;
                height: auto;
                vertical-align: middle;
                padding-top: 3px;
                padding-bottom: 3px
            }
        </style>
        <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/assets/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/assets/js/jquery-ui-1.10.3.min.js"></script>
        
        <!-- elFinder CSS (REQUIRED) -->
        <link rel="stylesheet" type="text/css" media="screen" href="<?php echo Yii::app()->baseUrl ?>/css/elfinder.min.css">
        <link rel="stylesheet" type="text/css" media="screen" href="<?php echo Yii::app()->baseUrl ?>/css/theme.css">
        
        <!-- elFinder JS (REQUIRED) -->
        <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/js/elfinder.min.js"></script>
        
        <!-- elFinder translation (OPTIONAL) -->
        <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/js/i18n/elfinder.ru.js"></script>
        
        <!-- elFinder initialization (REQUIRED) -->
        <script type="text/javascript" charset="utf-8">
            $().ready(function() {
            });
        </script>
        <!--show image-->
        <script src="<?php echo Yii::app()->baseUrl ?>/assets/lightbox/js/jquery-1.10.2.min.js"></script>
        <script src="<?php echo Yii::app()->baseUrl ?>/assets/lightbox/js/lightbox-2.6.min.js"></script>
        <link href="<?php echo Yii::app()->baseUrl ?>/assets/lightbox/css/lightbox.css" rel="stylesheet" />
        <title></title>
    </head>
    <body>
        <div id="breadcrumbs" class="breadcrumbs">
            
            <script type="text/javascript">
                try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){};
            </script>
            
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home home-icon"></i>
                    <a href="../site/index"><strong>Trang Chủ</strong></a>
                </li>
                
                <li>
                    <a href="../site/news"><strong> Tin Tức </strong></a>
                </li>
            </ul><!-- .breadcrumb -->
            
            <div id="nav-search" class="nav-search">
                <form class="form-search">
                    <span class="input-icon">
                        <input type="text" autocomplete="off" id="nav-search-input" class="nav-search-input" placeholder="Search ...">
                        <i class="icon-search nav-search-icon"></i>
                    </span>
                </form>
            </div><!-- #nav-search -->
        </div>    
        
        <div class="page-content">
            <div class="page-header">
                <h1>
                    <strong> Thông Tin </strong>
                    <small>
                        <i class="icon-double-angle-right"></i>
                        <strong>Danh Sách Thông Tin</strong>
                    </small>
                </h1>
            </div><!-- /.page-header -->
            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <p class="clearfix">
                        <a class="btn btn-sm btn-primary pull-right" href="../site/newsadd">
                            <i class="icon-share align-top bigger-125"></i>
                            Thêm Tin Tức Mới
                        </a>
                    </p>
                    <table id="grid-table"></table>
                    <div id="grid-pager"></div>
                    
                    <!-- PAGE CONTENT ENDS -->
                </div><!-- /.col -->
            </div><!-- /.row -->                                                                                                                                              
        </div><!-- /.page-content -->
        
        <!--		 basic scripts -->
        <script type="text/javascript">
            window.jQuery || document.write("<script src='<?php echo Yii::app()->baseUrl."/assets/js/jquery-2.0.3.min.js"?>'>"+"<"+"/script>");
        </script>
        
        <!--[if IE]>
                                <script type="text/javascript">
                                 window.jQuery || document.write("<script src='<?php echo Yii::app()->baseUrl."/assets/js/jquery-1.10.2.min.js"?>'>"+"<"+"/script>");
                                </script>
                                <![endif]-->
        
        <script type="text/javascript">
            if("ontouchend" in document) document.write("<script src='<?php echo Yii::app()->baseUrl."/assets/js/jquery.mobile.custom.min.js"?>'>"+"<"+"/script>");
        </script>
        <script src="<?php echo Yii::app()->baseUrl."/assets/js/bootstrap.min.js" ?>"></script>
        <script src="<?php echo Yii::app()->baseUrl."/assets/js/typeahead-bs2.min.js"?>"></script>
        
        <!-- page specific plugin scripts -->
        <script src="<?php echo Yii::app()->baseUrl."/assets/js/date-time/bootstrap-datepicker.min.js"?>"></script>
        <script src="<?php echo Yii::app()->baseUrl."/assets/js/jqGrid/jquery.jqGrid.min.js"?>"></script>
        <script src="<?php echo Yii::app()->baseUrl."/assets/js/jqGrid/i18n/grid.locale-en.js"?>"></script>
        
        <!-- ace scripts -->
        <script src="<?php echo Yii::app()->baseUrl."/assets/js/ace-elements.min.js"?>"></script>
        <script src="<?php echo Yii::app()->baseUrl."/assets/js/ace.min.js"?>"></script>
        <script type="text/javascript">
            //Center form
            jQuery.fn.center = function () { 
                this.css("position","absolute");
                this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
                this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
                return this;
            };
            jQuery(function($) {
                try{
                    var grid_selector = "#grid-table";    
                    var pager_selector = "#grid-pager";

                    function beforeDeleteCallback(e) {
                        var form = $(e[0]);
                        if(form.data('styled')) return false;
					
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_delete_form(form);
					
                        form.data('styled', true);
                    }
                    //enable datepicker
                    function pickDate( cellvalue, options, cell ) {
                        setTimeout(function(){
                            $(cell) .find('input[type=text]')
                                    .datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
                        }, 0);
                    } 
                    //switch element when editing inline
                    function aceSwitch( cellvalue, options, cell ) {
                        setTimeout(function(){
                            $(cell) .find('input[type=checkbox]')
                                    .wrap('<label class="inline" />')
                                    .addClass('ace ace-switch ace-switch-5')
                                    .after('<span class="lbl"></span>');
                        }, 0);
                    }   
				
                    function style_edit_form(form) {
                        //enable datepicker on "sdate" field and switches for "stock" field
                        form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
                                .end().find('input[name=stock]')
                                .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
			
                        //update buttons classes
                        var buttons = form.next().find('.EditButton .fm-button');
                        buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
                        buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
                        buttons.eq(1).prepend('<i class="icon-remove"></i>');
					
                        buttons = form.next().find('.navButton a');
                        buttons.find('.ui-icon').remove();
                        buttons.eq(0).append('<i class="icon-chevron-left"></i>');
                        buttons.eq(1).append('<i class="icon-chevron-right"></i>');
                    }
			
                    function style_delete_form(form) {
                        var buttons = form.next().find('.EditButton .fm-button');
                        buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
                        buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
                        buttons.eq(1).prepend('<i class="icon-remove"></i>')
                    }
				
                    function style_search_filters(form) {
                        form.find('.delete-rule').val('X');
                        form.find('.add-rule').addClass('btn btn-xs btn-primary');
                        form.find('.add-group').addClass('btn btn-xs btn-success');
                        form.find('.delete-group').addClass('btn btn-xs btn-danger');
                    }
                    function style_search_form(form) {
                        var dialog = form.closest('.ui-jqdialog');
                        var buttons = dialog.find('.EditTable')
                        buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
                        buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
                        buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
                    }
				
				
                    function beforeEditCallback(e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
			
			
			
                    //it causes some flicker when reloading or navigating grid
                    //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
                    //or go back to default browser checkbox styles for the grid
                    function styleCheckbox(table) {
                        /*
                                                $(table).find('input:checkbox').addClass('ace')
                                                .wrap('<label />')
                                                .after('<span class="lbl align-top" />')
			
			
                                                $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                                                .find('input.cbox[type=checkbox]').addClass('ace')
                                                .wrap('<label />').after('<span class="lbl align-top" />');
                         */
                    }
				
			
                    //unlike navButtons icons, action icons in rows seem to be hard-coded
                    //you can change them like this in here if you want
                    function updateActionIcons(table) {
                        /**
                                                var replacement = 
                                                {
                                                        'ui-icon-pencil' : 'icon-pencil blue',
                                                        'ui-icon-trash' : 'icon-trash red',
                                                        'ui-icon-disk' : 'icon-ok green',
                                                        'ui-icon-cancel' : 'icon-remove red'
                                                };
                                                $(table).find('.ui-pg-div span.ui-icon').each(function(){
                                                        var icon = $(this);
                                                        var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                                                        if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                                                })
                         */
                    }
				
                    //replace icons with FontAwesome icons like above
                    function updatePagerIcons(table) {
                        var replacement = 
                                {
                            'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
                            'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
                            'ui-icon-seek-next' : 'icon-angle-right bigger-140',
                            'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
                        };
                        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                            var icon = $(this);
                            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
                            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                        })
                    }
			
                    function enableTooltips(table) {
                        $('.navtable .ui-pg-button').tooltip({container:'body'});
                        $(table).find('.ui-pg-div').tooltip({container:'body'});}
                               
                    jQuery(grid_selector).jqGrid({
                        url:'../ajax/getNews', 
                        datatype: "json",
                        height: 250,
                        colNames:['ID','Tiêu Đề','Thời Gian','Tóm Tắt','Chi Tiết','Ảnh','link',''],
                        colModel:[						
                            {name:'news_id', index:'news_id', sorttype:"int", hidden: true , editrules: {edithidden:true} },
                            {name:'news_title', index:'news_title',editable: true,editoptions:{size:"20",maxlength:"30"}},
                            {name:'news_time', index:'news_time', editable: true, sorttype:'date'},
                            {name:'news_content', index:'news_content', editable: true, edittype: 'textarea', editoptions: {rows:"2",cols:"20"}, autoencode: true },
                            {name:'news_description', index:'news_description', editable: true, edittype: 'textarea', editoptions: {rows:"2",cols:"20"}, autoencode: true },
                            {
                                name: 'news_image',
                                editable: true,
                                fixed: true,
                                edittype: 'image',
                                editoptions: {src: '../../images/photo.png',onclick:'imageClick();',width:'100',height:'100'},   
                                formatter: function (cellvalue, options, cell) {                                                   
                                    return "<a href='../../files/"+cellvalue+"' data-lightbox='image-"+cell.id+"'>"+"<img id='row_"+cell.id+"' src='../../files/"+cellvalue+"' alt='Image Invalid'  height='100' width='100' OnClick='imageClick();'/></a>";
                                    //                                    "<img id='row_"+cell.id+"' src='../../files/"+cellvalue+"' alt='Image Invalid'  height='100' width='100' OnClick='imageClick();'/>";
                                },
                                unformat: function (cellvalue, options, cell) {                                                   
                                    return $('img', cell).attr('src');
                                }                    
                            },
                            {
                                name: 'link',
                                editable: true,
                                fixed: true,
                                hidden: true,
                                autoencode: true
                            },
                            {name:'myac',index:'', width:180, fixed:true, sortable:false, resize:false,
                                formatter:function (cellvalue, options, cell) {    
                                    return "<a class='btn btn-sm' href='../site/newsedit?id="+options.rowId+"'><i class='icon-edit align-top bigger-125'></i> Edit</a>"+
                                            "<a class='btn btn-sm btn-danger delete-row' id='delete' onClick='deleteRecords("+options.rowId+");'><i class='icon-trash align-top bigger-125'></i>Delete</a>";
                                }
				
                            },
                        ], 
                        //					viewrecords : true,
                        rowNum:10,
                        rowList:[10,20,30],
                        pager : pager_selector,
                        altRows: true, 
                        //                        sortname:"news_id",
                        viewrecords : true,
                        sortorder: "desc",
                        sortable:true,
                        loadonce: true,
                        //                                                                                                sortable:true,
                                                
                        //					multiselect: true,
                        //                                                                                                multiboxonly: true,

                        caption: "Cập Nhật Thông Tin",
                        autowidth: true,
                        loadComplete : function() {
                            var table = this;
                            setTimeout(function(){
                                styleCheckbox(table);
                                updateActionIcons(table);
                                updatePagerIcons(table);
                                enableTooltips(table);
                            }, 0);
                        },
                    }); 
                    //navButtons
                    jQuery(grid_selector).jqGrid('navGrid',pager_selector,
                    { 	//navbar options
                        edit: false,
                        editicon : 'icon-pencil blue',
                        //                                                                                                                   edittitle : 'Chỉnh sửa',
                        add: false,
                        addicon : 'icon-plus-sign purple',
                        del: true,
                        delicon : 'icon-trash red',
                        search: false,
                        searchicon : 'icon-search orange',
                        refresh: true,
                        refreshicon : 'icon-refresh green',
                        view: true,
                        viewicon : 'icon-zoom-in grey'
                    },
                    {
                        //edit record form
                        url:'../ajax/',
                        datatype:'json',
                        recreateForm: true,
                        closeAfterEdit: true,
                        editCaption: "Chỉnh sửa",
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                                                 
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
                            style_edit_form(form);
                        }
                        //                                                beforeInitData: function (e) {
                        //                                                var cm = jQuery(grid_selector).jqGrid('getColProp', 'image'),
                        //                                                selRowId = jQuery(grid_selector).jqGrid('getGridParam', 'selrow');
                        //                                                var cel = jQuery(grid_selector).jqGrid ('getCell', selRowId, 'image');
                        //                                                cm.editoptions.src=cel;
                        //                                                cm.editoptions.width=100;
                        //                                                cm.editoptions.height=100;
                        //                                                cm.editoptions.OnClick="imageClick();";
                        //                                            }
                    },
                    {
                        //new record form
                        url : '../ajax/',
                        datatype : "json",
                        addCaption : 'Thêm mới',
                        closeAfterAdd: true,
                        recreateForm: true,
                        viewPagerButtons: false,
                        reloadAfterSubmit:true,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
                            style_edit_form(form);
                        }
                        //                        recreateForm: true,
                        //                        closeAfterAdd: true,
                        //                        url:'../ajax/insertCategory',
                        //                        datatype:"json",
                        //                        reloadAfterSubmit:true,
                        //                        afterSubmit: function ()
                        //                        {   
                        //                              return [true,'',false]; // no error and no new rowid
                        //                        }
                                                
                    },
                    {
                        //delete record form
                        url : '../ajax/deleteNews',
                        datatype : "json",
                        recreateForm: true,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            if(form.data('styled')) return false;
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                            style_delete_form(form);
                            form.data('styled', true);
                        },
                        onClick : function(e) {
                            alert(1);
                        }
                    },
                    {
                        //search form
                        recreateForm: true,
                        afterShowSearch: function(e){
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                            style_search_form(form);
                        },
                        afterRedraw: function(){
                            style_search_filters($(this));
                        }
                        ,
                        multipleSearch: true
                        /**
                                                        multipleGroup:true,
                                                        showQuery: true
                         */
                    },
                    {
                        //view record form
                        recreateForm: true,
                        beforeShowForm: function(e){
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        }
                    }
                );
                           
                      
                                   
                                
                }catch(e){
                    alert(e);
                }			

            });
            function imageClick(){
                $( "#dialog-message" ).dialog({
                    title:"",
                    height:600,
                    width:1100,
                    modal: true
                });
					
                var elf = $('#elfinder').elfinder({
                    url : '<?php echo Yii::app()->baseUrl ?>/php/connector.php' // connector URL (REQUIRED)
                    ,lang: 'en',
                    width:'100%',
                    commandsOptions: {
                        getfile: {
                            oncomplete: 'destroy' 
                        }
                    },
                    getFileCallback: function(file) {
                        // var cm = jQuery("#grid-table").jqGrid('getColProp', 'image');
                        // cm.editoptions.src=file;
                        $('#news_image').attr('src',file);
                        $('#link').attr('value',file);
                        $( "#dialog-message" ).dialog( "close" );
                    }
                }).elfinder('instance'); 
                
            };
            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
                buttons.eq(1).prepend('<i class="icon-remove"></i>')
            }
            function deleteRecords(id) {
                jQuery("#grid-table").jqGrid('delGridRow',id,{reloadAfterSubmit:true,
                    url : '../ajax/deleteNews',
                    recreateForm: true,
                    beforeShowForm : function(e) {                                       
                        var form = $(e[0]);
                        if(form.data('styled')) return false;
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_delete_form(form);
                        form.data('styled', true);
                    },
                    afterShowForm: function(form) {
                        form.closest('div.ui-jqdialog').center();
                    },
                    success:function(data){
                        jQuery("#grid-table").trigger('reloadGrid'); },
                    onClick : function(e) {
                        alert(1);
                    }
                }); 
            }
        </script>
        <div id="dialog-message" >
            <div id="elfinder"></div>
        </div>
        
        
    </body>
</html>
